<script setup>
  import {computed, ref} from 'vue'
  let once=ref(0);
  let second=ref(0);
  let three=ref(0);
  let allnum=ref(0);
  let allprice=ref(0);
  let price1=ref(0);
  let price2=ref(0);
  let price3=ref(0);
  function btnAdd1(){
    once.value+=1
    price1.value=5*once.value
    allnum.value=once.value+second.value+three.value
    allprice=price1.value+price2.value+price3.value
  }
  function btnAdd2(){
    second.value+=1
    price2.value=20*second.value
    allnum.value=once.value+second.value+three.value
    allprice=price1.value+price2.value+price3.value
  }
  function btnAdd3(){
    three.value+=1
    price3.value=10*three.value
    allnum.value=once.value+second.value+three.value
    allprice=price1.value+price2.value+price3.value
  }
  function btnJian1(){
    if(once.value>0 || price1.value>0){
    once.value-=1
    price1.value=price1.value-5
    allnum.value=once.value+second.value+three.value
    allprice=price1.value+price2.value+price3.value
    }else{
      price1.value==0
      once.value==0
    }
  }
  function btnJian2(){
    if(second.value>0 || price2.value>0){
    second.value-=1
    price2.value=price2.value-20
    allnum.value=once.value+second.value+three.value
    allprice=price1.value+price2.value+price3.value
    }else{
      price2.value==0
      second.value==0
    }
  }
  function btnJian3(){
    if(three.value>0 || price3.value>0){
    three.value-=1
    price3.value=price3.value-10
    allnum.value=once.value+second.value+three.value
    allprice=price1.value+price2.value+price3.value
    }else{
      price3.value==0
      three.value==0
    }
  }
</script>

<template>
  <div class="big">
    <h1>购物车</h1>
    <div class="goods">
      <div class="g1">
        <div class="img">
          <img src="../img/book.jpg" alt="">
        </div>
        <div class="jj">
          <p class="g">书本</p>
          <p class="p">￥5</p>
        </div>
        <div class="button">
          <input type="button" value="+" @click="btnAdd1">
          <p class="price">{{once}}</p>
          <input type="button" value="-" @click="btnJian1">
        </div>
        <div class="one">
          ￥{{price1}}
        </div>
      </div>
      <div class="g2">
        <div class="img">
          <img src="../img/panda.jpg" alt="">
        </div>
        <div class="jj">
          <p class="g">熊猫</p>
          <p class="p">￥20</p>
        </div>
        <div class="button">
          <input type="button" value="+" @click="btnAdd2">
          <p class="price">{{second}}</p>
          <input type="button" value="-" @click="btnJian2">
        </div>
        <div class="one">
          ￥{{price2}}
        </div>
      </div>
      <div class="g3">
        <div class="img">
          <img src="../img/cat.jpg" alt="">
        </div>
        <div class="jj">
          <p class="g">猫咪</p>
          <p class="p">￥10</p>
        </div>
        <div class="button">
          <input type="button" value="+" @click="btnAdd3">
          <p class="price">{{three}}</p>
          <input type="button" value="-" @click="btnJian3">
        </div>
        <div class="one">
          ￥{{price3}}
        </div>
      </div>
    </div>
    <div class="all">
      <img src="../img/taxi.jpg" alt="" class="img11">
      <p class="alln">商品数量：{{allnum}}</p>
      <p class="allp">商品总价：{{allprice}}</p>
    </div>
  </div>
</template>

<style scoped>
  .big{
    width: 500px;
    border: 1px solid;
  }
  h1{
    font-size: 50px;
    text-align: center;
    color: rgb(245, 142, 8);
  }
  .goods{
    display: flex;
    flex-direction: column;
    align-self: center;
  }
  .g1,.g2,.g3{
    width: 100%;
    height: 100px;
    position: relative;
  }
  .g2,.g3{
    margin-top: 20px;
  }
  .img{
    position: absolute;
  }
  .jj{
    position: absolute;
    top: -3px;
    left: 115px;
  }
  .button{
    position: absolute;
    top: 8px;
    left: 437px;
  }
  .one{
    position: absolute;
    left: 350px;
    top: 31px;
    font-size: 25px;
    color: rgb(43, 220, 226);
  }
  img{
    width: 100px;
    height: 100px;
  }
  .img11{
    width: 50px;
    height: 50px;
    position: absolute;
    top: 3px;
    left: 258px;
  }
  .g{
    font-size: 25px;
  }
  .p{
    font-size: 15px;
    color: brown;
  }
  input{
    display:inline-block;
    width: 30px;
    height: 30px;
  }
  .price{
    margin-left: 10px;
  }
  .all{
    height: 100px;
    position: relative;
    margin-top: 20px;
  }
  .alln{
    position: absolute;
    top: 5px;
    left: 338px;
  }
  .allp{
    position: absolute;
    top: 30px;
    left: 338px;
  }
</style>
